import React, { useEffect, useState } from 'react';
import { history } from 'umi';
import { Radio, DatePicker, Calendar, message } from 'antd';
import moment from 'moment';
import zhCN from 'antd/es/date-picker/locale/zh_CN';
import style from '../../DataBoard.css';
import style2 from './CustomDatePicker.css';
import Loading from '@/components/Loading';

let mockData = [], dateData = [], costData = [], quotaData = [];
for ( var i = 0; i < 12; i++ ){
    costData.push(1000 + Math.round(Math.random() * 200));
    quotaData.push(1000 + Math.round(Math.random() * 200));
    dateData.push(i);
}
mockData.date = dateData;
mockData.cost = costData;
mockData.quota = quotaData;

let today = new Date();

function CostCalender({ theme, data, onDispatch }){
    const [timeType, setTimeType] = useState('month');  
    const [listInfo, setListInfo] = useState([]);
    const [currentDate, setCurrentDate] = useState(moment(new Date())); 
    const [loading, setLoading] = useState(false);
    data = mockData;
    let currentDateStr = currentDate.format('YYYY-MM-DD').split('-');
    
    function dateCellRender(value){
        let itemDateStr = value.format('YYYY-MM-DD').split('-');
        // 判断当前日期是否在当月
        let isInMonth = itemDateStr[1] === currentDateStr[1] ? true : false ;
        let lessToday = new Date(value.format('YYYY-MM-DD')).getTime() <= today.getTime() ? true : false;
        let cost = data.cost  ? data.cost[itemDateStr[2] - 1] : 0;
        let quota = data.quota  ? Number(data.quota[itemDateStr[2] - 1]) : 0;
        let energy = data.energy  ? data.energy[itemDateStr[2] - 1] : 0;
        return (        
            <div className={style2['content-wrapper'] + ' ' + ( isInMonth  ?  quota && cost >= quota ? style2['in-warning'] : style2['in-month'] : '')}>
                <div className={style2['content']}>
                    <div className={style2['content-head']}>{ itemDateStr[2] }</div>                                  
                    <div className={style2['content-body']}>
                        <div className={style2['text']} style={{ marginLeft:'4px', fontSize:'1.2rem', fontWeight:'bold' }}>{ isInMonth ? lessToday ? cost && Math.round(cost) : '' : '' }</div>
                    </div>
                </div>                      
            </div>
        )
    };
    function monthCellRender(value){
        let itemDateArr = value.format('YYYY-MM-DD').split('-');
        let lessMonth = value.month() <= today.getMonth() ? true : false; 
        let cost = data.cost ? data.cost[itemDateArr[1] - 1] : 0;
        let energy = data.energy ? data.energy[itemDateArr[1] - 1] : 0;
        let quota = data.quota ? Number(data.quota[itemDateArr[1] - 1]) : 0;  
        return (
            <div className={style2['content-wrapper'] + ' ' + ( lessMonth ? quota && cost >= quota ? style2['in-warning'] : style2['in-month'] : '' )}>
                <div className={style2['content']} style={{ justifyContent:'space-between', padding:'0 3rem' }}>                 
                    <div className={style2['content-head']}>{ value.month() + 1 }</div>
                    <div className={style2['content-body']}>
                        <div className={style2['text']} style={{ marginLeft:'4px', fontSize:'1.6rem', fontWeight:'bold' }}>{ lessMonth ? cost && Math.round(cost) : '' }</div>
                    </div>
                </div>
            </div>
        )
    }
    return (
        <div className={style['card-container']} style={{ boxShadow: 'none' }}>
            { loading && <Loading /> }
            <div
                className={style['card-container-title']}
                style={{ height: '2rem', borderBottom:'none', lineHeight:'2rem' }}
            >
                <div style={{ display:'flex', alignItems:'center' }}>
                    <span style={{ marginRight: '1rem', color: theme === 'dark' ? '#fff' : '#000' }}>能耗日历</span>
                    <Radio.Group className={style2['custom-radio']} value={timeType} onChange={e=>setTimeType(e.target.value)}>
                        <Radio.Button value='month'>日</Radio.Button>
                        <Radio.Button value='year'>月</Radio.Button>
                    </Radio.Group>
                </div>
                
            </div>
            <div style={{ height:'calc( 100% - 2rem)' }}>
                <Calendar
                    className={style2['custom-calendar'] + ' ' + (theme === 'dark' ? style2['dark'] : '')}
                    locale={zhCN}
                    value={currentDate}
                    mode={timeType}
                    headerRender={()=>null}
                    dateFullCellRender={dateCellRender}
                    monthFullCellRender={monthCellRender}
                    onSelect={                 
                        value=>{
                            let selectedDate = value.format('YYYY-MM-DD').split('-');
                            if ( timeType === 'month' && selectedDate[1] !== currentDateStr[1] ) {
                                setCurrentDate(value);
                            }                        
                        }
                    }
                />
            </div>
        </div>
    )
}

export default CostCalender;